<template>
	<div class="title">
		<slot></slot>
		<div class="left" @click="leftClick"><img src="/static/back.png" v-if="leftIcon" /><span>{{left}}</span></div>
		<div class="right" @click="rightClick"><span>{{right}}</span></div>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		props: ['left', 'leftIcon', 'right'],
		data() {
			return {

			}
		},
		methods: {
			leftClick() {
				if(this.$route.path == '/') {} else {
					window.history.go(-1)
				}

			},
			rightClick() {
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		height: 50px;
		line-height: 50px;
		background: #000;
		text-align: center;
		color: #fff;
		font-size: 20px;
		.left {
			color: #fff;
			position: absolute;
			top: calc(50% - 15px);
			left: 13px;
			font-size: 0;
			line-height: 0;
			img {
				width: 30px;
				height: 30px;
			}
			span{
				font-size: 12px;
				line-height:30px;
			}
		}
		.right {
			position: absolute;
			top: 0;
			right: 13px;
			font-size: 12px;
		}
	}
</style>